<template>
  <a-layout class="f-h-100 s-bg-white ">
    <u-table-header>
      <a-space class="f-padding-b14">
        <u-icon-button itype="add" @click="openNewDialog">新建流程</u-icon-button>
        <!-- <u-icon-button itype="edit" @click="search('reset')">重置</u-icon-button> -->
        <u-icon-button itype="refresh" @click="getList">刷新</u-icon-button>
      </a-space>
    </u-table-header>
    <u-table-content>
      <u-table rowKey="deploymentID"
        :data="list"
        :columns="tableColumns"
        :scroll="{ y: useTableScroll() }"
        v-model:pagination="pagination"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
      </u-table>
    </u-table-content>

    <!-- 流程设计 -->
    <u-dialog title="流程设计"
      v-model:open="dialogVisible"
      width="100%"
      destroyOnClose
      :hideBtns="['submit', 'close']"
      wrap-class-name="full-modal"
      @close="cloaseDialog">
      <vue-Bpmn
        :processId="processId"
        :deployMName="deployMName"
        :deployMId="deployMId"
        product="activiti"
      ></vue-Bpmn>
    </u-dialog>
  </a-layout>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'flowDefinition'
})
import { ref, reactive, onMounted, h } from 'vue'
import VueBpmn from '@b/flow/components/processDesign.vue';
import {
  processList,
  delDefinition
} from '@bs/process/flowdesign';
// import Pagination from '@/components/Pagination';
import { colorList } from '@b/const';
// import { tableColumns } from './const';
import { messageC } from '@/util/common'
import { ColumnProps } from 'ant-design-vue/es/table';
import { Button, Popconfirm, Space } from 'ant-design-vue';
import { useTableScroll } from '@/hooks/useTable'

//流程设计器是否显示
const dialogVisible = ref(false);
//流程id
const deployMId = ref('');
//流程名称
const deployMName = ref('');
//实例id
const processId = ref('');
//颜色
// const colorList;
//常用流程分类
const tabList = ref([]);
//tab活动名称
const activeName = ref('');
//table行
// const tableColumns;
//流程列表
const list = ref([]);
const total = ref(0);
const listLoading = ref(false);
//查询参数
let pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`
})
const form = ref();
const searchForm = reactive({
  pageNum: 1,
  pageSize: 50,
  name: '',
  sortid: ''
})
const tableColumns:Array<ColumnProps> = [
  { title: '序号', dataIndex: 'index', width: '80px',
    customRender: ({ index }) => index += 1
  },
  { title: '流程名称', dataIndex: 'name' },
  { title: '流程ID', dataIndex: 'procId' },
  { title: '流程定义Key', dataIndex: 'procKey' },
  { title: '版本号', dataIndex: 'version' },
  { title: '操作', dataIndex: 'operation', width: '300px', align: 'center',
    customRender: ({ record, text }) => {
      return h(Space, () => [
        h(Button, { 
          type: 'link', 
          onClick: () => editFlowDialog(record.deploymentID, record.name, record.procKey) 
        }, () => '设计流程'),
        h(Popconfirm, { title: '您确定要删除吗？', onConfirm: () => deleteById(record),},
          () => [
            h(Button, { type: 'link' }, () => '删除')
          ]
        )
      ])
    }
  }
]

onMounted(() => {
  getList();
})

// 获取流程列表
function getList(current?: number) {
  listLoading.value = true;
  if(current == 1) {
    pagination.current = current
  }
  searchForm.size = pagination.pageSize;
  searchForm.current = pagination.current;
  processList(searchForm).then((res) => {
    if (res.error === 200) {
      list.value = res.result.list;
      total.value = res.result.total;
    } else {
      messageC(`获取列表失败`, 'error');
    }
    listLoading.value = false;
  })
  .catch(() => listLoading.value = false);
}

// 新增流程
function openNewDialog() {
  dialogVisible.value = true;
  deployMId.value = '';
  deployMName.value = '';
  processId.value = '';
}

//设计流程
function editFlowDialog(deploymentId, deploymentName, processId1) {
  dialogVisible.value = true;
  deployMId.value = deploymentId;
  deployMName.value = deploymentName;
  processId.value = processId1;
}

//关闭事件
function cloaseDialog() {
  deploy();
  sessionStorage.removeItem('collectionMultiple')
}

//刷新事件
function deploy() {
  getList();
}

function handleClick(tab, event){
  onChangeType(tab.name);
}

//查询
function search(type?: string) {
  // if (type === 'reset') {
  //   form.value.resetFields();
  //   searchForm.sortid = null;
  // }
  searchForm.page = 1;
  getList();
}

//点击流程类型查询
function onChangeType(type) {
  searchForm.sortid = type;
  search();
}

//删除流程实例
async function deleteById(row) {
  const res = await delDefinition({ depID: row.deploymentID });
  if (res.error === 200) {
    messageC(`删除成功`, 'success');
    search('reset');
  } else {
    messageC(`删除失败`, 'error');
  }
}
</script>
